<template>
  <div class="page">
    <heads></heads>
    <div class="page-content" style="width: 100%;background-color: #fff">
      <div class="loginDiv">
        <div class="loginFrom">
          <mt-field label="手机号" disableClear :state="isName" v-model="loginName" :attr="{ maxlength: 11 }"  placeholder="输入手机号" type="tel"></mt-field>
          <mt-field label="密码" disableClear :state="isPswd"  v-model="loginPswd" :attr="{ maxlength: 18 }" placeholder="输入密码" type="password"></mt-field>
          <mt-field label="密码" disableClear :state="isPswd2"  v-model="loginPswd2" :attr="{ maxlength: 18 }" placeholder="确认密码" type="password"></mt-field>

          <mt-field label="验证码" disableClear :state="isimgCode" v-model="imgCode" type="tel" :attr="{ maxlength: 4 }"  placeholder="输入图片验证码" class="codeImg">
            <img :src="initImg" height="32px" width="60px" @click="getPicCode">
          </mt-field>
          <mt-field label="短信验证" disableClear :state="isNoteCode" v-model="noteCode" type="tel" :attr="{ maxlength: 6 }"   placeholder="输入短信验证码" class="codeNote">
              <span class="codeBtn" @click="codeClick">{{timeTxt}}</span>
          </mt-field>
        </div>
        <div class="loginBtn">
          <mt-button @click="ischangeName">注册</mt-button>
        </div>
        <div @click='$router.push("/login")' class="reglogin">登录</div>
      </div>
    </div>
  </div>
</template>
<script>
  import heads from '../components/header'
  import { MessageBox,Toast  } from 'mint-ui';
//  import MtButton from "../../node_modules/mint-ui/packages/button/src/button";
  export default {
    data(){
      return{
        isName:'',//警告
        isPswd:'',
        isPswd2:'',

        isimgCode:'',
        isNoteCode:'',
        loginName:[],
        loginPswd:[],
        loginPswd2:[],
        imgCode:[],
        noteCode:[],
        initImg:this.API.getPicCode,
        nameRex:/^1[3|4|5|7|8]\d{9}$/,
        pswdRex:/^[0-9A-Za-z]+$/,
        isMsg:'',
        timeTxt:'获取验证码',
        time:5,
        istime:false,
      }
    },
    created(){
      console.log(this.API.getPicCode)
    },
    methods:{
        getPicCode:function () {
            this.initImg=this.API.getPicCode+'?time='+new Date().getTime();
        },
        ischangeName:function () {
          if(!this.changeName()||!this.changePswd()||!this.imgPtCode()||!this.notePtCode()){
             return false
          }else{
              this.$http(this.API.register,{data:{
                username:this.loginName,
                code:this.noteCode,
                password:this.loginPswd,
                passwordConfirm:this.loginPswd2,
              }}).then(function(res) {
                  Toast({
                    message: res.message,
                    position: 'top',
                    duration: 1000
                  });
                  if(res.flag==1){
                    this.$router.push({path:'/index'})
                  }
                }).catch(function(err) {
                  console.log(err);
              });
          }
        },
        changeName:function () {
          if(this.loginName==''){
            this.isName='warning';
            this.isMsg='请输入手机号'
            return false
          }else if(!(this.nameRex).test(this.loginName)){
            this.isName='error';
            this.isMsg='手机号码格式错误'
            return false
          }else{
            this.isName='success';
            return true
          }
        },
        changePswd:function () {
          if(this.loginPswd==''){
            this.isPswd='warning';
            this.isMsg='请输入密码'
            return false
          }else if(!(this.pswdRex).test(this.loginPswd)||this.loginPswd.length<6){
            this.isPswd='error'
            this.isMsg='密码:6-18位字母或数字'
            return false
          }else if(this.loginPswd2!=this.loginPswd){
            this.isPswd2='error'
            this.isMsg='密码输入不一致';
            return false
          }else{
            this.isPswd='success'
            return true
          }
        },
        imgPtCode:function () {//imgCode
          if(this.imgCode==''){
            this.isimgCode='warning'
            this.isMsg='请输入图片验证码'
            return false
          }else{
            this.isimgCode='success'
            return true
          }
        },
        notePtCode:function () {
          if(this.noteCode==''){
            this.isNoteCode='warning'
            this.isMsg='请输入短信验证码'
            return false
          }else{
            this.isNoteCode='success'
            return true
          }
        },
        codeClick:function () {
            var _this=this;
          if(!this.changeName()||!this.imgPtCode()){
            this.isMsg='请确认输入用户名和验证码'
            return false
          }else{
            if(this.istime)return
            this.istime=true
            this.time=5
            this.setTime();
            this.$http(this.API.etVerifyCode,{data:{mobile:this.loginName,vcode:this.imgCode}})
              .then(function(res) {
                  if(res.flag!=1){
                    _this.isimgCode='warning';
                  }else{
                    _this.isimgCode='success';
                  }
                  Toast({
                    message: res.message,
                    position: 'top',
                    duration: 1000
                  });
              }).catch(function(err) {
                console.log(err);
            });
          }

        },
        setTime:function () {
            console.log(6)
            if(!this.istime) return;
            this.time>0?this.timeTxt=(this.time+'s'):this.timeTxt=('重新获取');
            --this.time;
            this.time<0?this.istime=false:this.istime=true
            setTimeout(()=>{
              this.setTime()
            },1000);
        },
    },
    components: {
//      MtButton,
      heads
    }

  }
</script>
<style>
  @import '../sass/pageScss/login.scss';
</style>

